<template>
    <div>
        <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
                style="font-weight: bold;">新增非本区正式编制的临时用工人员基本信息（编外人员）
            </span> </div>
        <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;"><span
                style="font-weight: bold;">提示：新增[本区]编外人员（临时用工）信息有右侧可选的两个方式，请选择
            </span>
            <div style="float: right;">
                <el-radio v-model="radio" label="1" @input="radioInput">表单逐一输入方式</el-radio>
                <el-radio v-model="radio" label="2" @input="radioInput" disabled>EXCEL表格批量导入方式</el-radio>
            </div>
        </div>
        <div v-if="radio == 1">
            <div style="text-align: center;display: ruby-text;margin-top: 200px;">
                <div style="width: 600px;height: 40px;background-color: bisque;line-height: 40px;">
                    请下面输入需要新增教职工（编外）的关键信息后，点击"新增"
                </div>
            </div>
            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                请选择新增教职工的证件类型:
                <el-select v-model="sfzlxval" placeholder="请选择" style="width: 300px;">
                    <el-option v-for="(item, index) in sfzlx" :key="index" :label="item.mc" :value="item.dm">
                    </el-option>
                </el-select>
            </div>

            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                请输入新增教职工的证件号码:
                <el-input v-model="sfzjh" placeholder="请输入证件号码" style="width: 300px;"></el-input>
            </div>
            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                <el-button type="primary" style="color: #fff;" @click="shenheSel">核查后新增</el-button>
            </div>
        </div>

        <div v-if="radio == 2">
            <div style="text-align: center;display: ruby-text;margin-top: 180px;">
                <div style="width: 600px;height: 40px;background-color: bisque;line-height: 40px;">
                    仅能批量导入中国籍且以居民身份证号为关键信息的教职工，请使用导入模板文件导入
                </div>
            </div>
            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                批量导入教职工信息的模板文件下载链接:
                <a href="" style="text-decoration: underline;">崇明区教职工信息导入模板文件</a>
            </div>
            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                请正确选择批量导入教职工编制所在的校区:
                <el-select v-model="value" placeholder="请选择" style="width: 300px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                请选择导入教职工基本信息的EXCEL数据文件:
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                    :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">（已在下载的模板文件中添加了教职工信息）</div>
                </el-upload>
            </div>
            <div style="text-align: center;display: ruby-text;margin-top: 20px;">
                <el-button type="primary" style="color: #fff;">开始从EXCEL导入</el-button>
            </div>
        </div>

        <el-dialog title="请输入新增教职工(编外)的下列基本信息" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
            <div>
                <div style="width:100%;">
                    <table border='0' cellspacing="0" cellpadding="0"
                        style="border-collapse:collapse;border-style:none;font-family:宋体;font-size:13px; width:100%; ">
                        <tr>
                            <td class="td1" style=" width:100px;">
                                身份证件类型
                            </td>
                            <td class="td1" style=" width:200px;">
                                <span v-text="sfzlxLabel"></span>
                            </td>
                            <td class="td1" style=" width:100px;">
                                身份证件号码
                            </td>
                            <td class="td1">
                                <span v-text="sfzjh"></span>
                            </td>

                        </tr>
                        <tr>
                            <td class="td1">
                                <span style="color: red;">*</span>姓名
                            </td>
                            <td class="td1">
                                <el-input v-model="name" placeholder="请输入姓名"></el-input>
                            </td>
                            <td class="td1">
                                性别
                            </td>
                            <td class="td1">
                                <el-radio v-model="radiosex" label="1">男</el-radio>
                                <el-radio v-model="radiosex" label="2">女</el-radio>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                国家地区
                            </td>
                            <td class="td1">
                                <el-select v-model="country" placeholder="请选择">
                                    <el-option v-for="(item, index) in countryArr" :key="index" :label="item.mc"
                                        :value="item.dm">
                                    </el-option>
                                </el-select>
                            </td>
                            <td class="td1">
                                民族
                            </td>
                            <td class="td1">
                                <el-select v-model="mz" placeholder="请选择">
                                    <el-option v-for="(item, index) in mzArr" :key="index" :label="item.mc"
                                        :value="item.dm">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                政治面貌
                            </td>
                            <td class="td1">
                                <el-select v-model="zzmm" placeholder="请选择">
                                    <el-option v-for="(item, index) in zzmmArr" :key="index" :label="item.mc"
                                        :value="item.dm">
                                    </el-option>
                                </el-select>
                            </td>
                            <td class="td1">
                                出生年月
                            </td>
                            <td class="td1">
                                <el-date-picker v-model="birth" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                现在编单位
                            </td>
                            <td class="td1">
                                <span v-text="xiaoquText"></span>
                            </td>
                            <td class="td1">
                                编制所在校区
                            </td>
                            <td colspan="2" class="td1">
                                <!-- <span v-text="xiaoquText"></span> -->
                                <el-select v-model="xiaoqu" placeholder="请选择">
                                    <el-option label="外省学校" value="3000000000">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                现工作单位
                            </td>
                            <td class="td1">
                                <span v-text="gzxiaoquText"></span>
                            </td>
                            <td class="td1">
                                工作校区
                            </td>
                            <td colspan="2" class="td1">
                                <el-select v-model="gzxiaoqu" placeholder="请选择" @change="onChange2">
                                    <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC"
                                        :value="item.NEW_XQDM">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                教职工编号
                            </td>
                            <td class="td1">
                                <span>{{ faculty ? faculty.TeacherId : "待编制" }}</span>
                            </td>
                            <td class="td1">
                                登记状态
                            </td>
                            <td colspan="2" class="td1">
                                <span>正常在岗</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                联系电话
                            </td>
                            <td class="td1">
                                <el-input v-model="phone" placeholder="请输入联系电话"></el-input>
                            </td>

                        </tr>

                    </table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">提 交</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import httpdict from "../../api/dict";
import httplogin from "../../api/login";
export default {
    name: 'Success',

    data() {
        return {
            phone: "",
            sfzjh: "",
            dialogVisible: false,
            value1: "",
            radio: "1",
            radiosex: "1",
            sfzlx: [],
            sfzlxval: '1',
            type: true,
            countryArr: [],
            country: "156",
            mzArr: [],
            mz: "1",
            zzmmArr: [],
            zzmm: "13",
            sfzlxLabel: "",
            birth: "",
            faculty: "",
            schoolList: [],
            xiaoqu: "3000000000",
            gzxiaoqu: "3101517061",
            xiaoquText: "外省学校",
            gzxiaoquText: "",
            name: "",

        }
    },
    mounted() {
        this.getshzjlxway()
    },
    methods: {
        async onSubmit() {
            if (this.name == "") {
                this.$message({
                    type: 'error',
                    message: "请输入教职工姓名"
                });
                return
            }
            var data = {
                sfzjlx: this.sfzlxval,
                sfzjh: this.sfzjh,
                xm: this.name,
                xbm: this.radiosex,
                gjdq: this.country,
                mz: this.mz,
                zzmm: this.zzmm,
                csny: this.birth,
                djXqdm: this.xiaoqu,
                gzXqdm: this.gzxiaoqu,
                gwzt: "01",
                lxdh: this.phone
            }
            var res = await httplogin.saveFaculty(data);
            if (res.data.code == 200) {
                this.$message({
                    type: 'success',
                    message: res.data.msg
                });
                this.dialogVisible = false
            }


        },
        onChange2(e) {


            for (let i = 0; i < this.schoolList.length; i++) {
                if (e == this.schoolList[i].NEW_XQDM) {

                    this.gzxiaoquText = this.schoolList[i].XQJC
                    break
                }
            }
        },
        async getshzjlxway() {
            var res = await httpdict.getshzjlx();
            if (res.data.code == 200) {
                this.sfzlx = res.data.data.sfzlx;
            }
        },
        async shenheSel() {
            if (this.sfzlxval == "") {
                this.$message({
                    type: 'error',
                    message: "请选择身份证类型"
                });
                return
            }
            if (this.sfzjh == "") {
                this.$message({
                    type: 'error',
                    message: "请输入身份证号"
                });
                return
            }

            var data = {
                sfzjh: this.sfzjh,
                sfzjlx: this.sfzlxval
            }
            var res = await httplogin.examineCard(data)
            if (res.data.code == 200) {
                if (res.data.data.examine) {
                    this.$alert("本身份证号已经在本区教职工信息库中存在!<br/>应利用系统的调动或借用功能", '提示', {
                        confirmButtonText: '确定',
                        dangerouslyUseHTMLString: true,
                        callback: action => {
                            // this.$message({
                            //   type: 'info',
                            //   message: ``
                            // });
                        }
                    });
                } else {
                    this.GetCountryway();
                    this.GetZzmmway();
                    this.GetMzway();
                    for (let i = 0; i < this.sfzlx.length; i++) {
                        if (this.sfzlxval == this.sfzlx[i].dm) {
                            this.sfzlxLabel = this.sfzlx[i].mc
                            break
                        }
                    }
                    this.birth = this.idCard(this.sfzjh, 1);
                    this.radiosex = this.idCard(this.sfzjh, 2)
                    this.getUserPermissionInfofun();
                    this.getFacultyinitialway();
                    this.dialogVisible = true
                }
            } else {
                this.$message({
                    type: 'error',
                    message: res.data.msg
                });
            }
        },
        async getUserPermissionInfofun() {
            let res = await httplogin.getUserPermissionInfo();
            if (res.data.code == 200) {
                if (res.data.data.estate == "区级") {
                    this.schoolList = res.data.data.UserPermission
                    this.sortPingyinfun(this.schoolList)

                    for (let i = 0; i < this.schoolList.length; i++) {
                        if (this.gzxiaoqu == this.schoolList[i].NEW_XQDM) {
                            // this.xiaoquText = this.schoolList[i].XQJC
                            this.gzxiaoquText = this.schoolList[i].XQJC
                            break
                        }

                    }

                }
            }
        },
        sortPingyinfun(list) {
            list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
            return list
        },
        async getFacultyinitialway() {
            var data = {
                sfzjh: this.sfzjh,
                sfzjlx: this.sfzlxval
            }
            var res = await httplogin.getFacultyinitial(data);
            if (res.data.code == 200) {
                this.faculty = res.data.data.faculty;
            }
        },
        async GetCountryway() {
            var res = await httpdict.GetCountry();
            if (res.data.code == 200) {
                this.countryArr = res.data.data.sfzlx;
            }
        },
        async GetMzway() {
            var res = await httpdict.GetMz();
            if (res.data.code == 200) {
                this.mzArr = res.data.data.sfzlx;
            }
        },
        async GetZzmmway() {
            var res = await httpdict.GetZzmm();
            if (res.data.code == 200) {
                this.zzmmArr = res.data.data.sfzlx;
            }
        },
        //通过身份证号计算年龄、性别、出生日期
        idCard(userCard, num) {
            //获取出生日期
            var birth;
            if (num == 1) {
                birth = userCard.substring(6, 10) + "-" + userCard.substring(10, 12) + "-" + userCard.substring(12, 14);
                return birth;
            }
            //获取性别
            if (num == 2) {
                if (parseInt(userCard.substr(16, 1)) % 2 == 1) {
                    return "1";
                } else {
                    return "2";
                }
            }
            //获取年龄
            if (num == 3) {
                var myDate = new Date();
                var month = myDate.getMonth() + 1;
                var day = myDate.getDate();
                var age = myDate.getFullYear() - userCard.substring(6, 10) - 1;
                if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day) {
                    age++;
                }
                return age;
            }
        }
    }
}
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
}

.td1 {
    border: 1px solid #8c8c8c;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #3c3c3c;
    padding: 3px;
    width: 40%;
}

.inputbox {
    text-align: center;
    line-height: 25px;
    border: 1px solid #b3b3b3;
    font-size: 13px;
    height: 25px;
    width: 96%;
}

.rblList td {
    font-size: 13px;
    color: #3c3c3c;
    border-style: none;
    text-align: left;
    height: 30px;
    line-height: 30px;
}

.result-success {
    .action:not(:first-child) {
        margin-left: 8px;
    }

    .project-name {
        font-size: 16px;
        color: @title-color;
        font-weight: 500;
        margin-bottom: 20px;
    }
}
</style>